<template>
  <div class="demo-container">
    <h2>计数器演示</h2>
    <div>当前值: {{ count }}</div>
    <div>两倍值: {{ doubleValue }}</div>
    <button @click="handleClick" class="action-btn">计算两倍值</button>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref } from "vue";
  let count = ref(0);
  const doubleValue = computed(() => count.value * 2);
  const handleClick = () => {
    count.value = doubleValue.value;
  };
</script>
<style scoped lang="scss">
  .demo-container {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;

    h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }

    div {
      font-size: 18px;
      margin: 10px 0;
    }

    .action-btn {
      padding: 8px 16px;
      background-color: #42b983;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;

      &:hover {
        background-color: #3aa876;
      }
    }
  }
</style>
